<template>
  <div class="collection">
    <!-- 导航栏 -->
    <van-nav-bar
      title="我的收藏"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />

    <!-- 照片墙 -->
    <div class="photo">
      <img src="../assets/collection.jpg" alt="" />
    </div>

    <div class="main">
      <div class="collectionbox" v-for="(item, index) in LikeData" :key="index">
        <!-- 图片 -->
        <div class="img">
          <img :src="item.smallImg" alt="" />
        </div>

        <!-- 商品名 -->
        <div class="name">{{ item.name }}</div>
        <div class="enname">{{ item.enname }}</div>

        <!-- 价格 -->
        <div class="price">
          &yen;{{ item.price }}
          <van-icon name="delete-o" @click="notlike(item)" />
        </div>
      </div>

      <van-empty v-show="LikeData.length === 0" description="购物袋空空如也！">
        <van-button round type="danger" class="bottom-button" @click="goOrder">
          去逛逛
        </van-button>
      </van-empty>
    </div>
  </div>
</template>

<script>
export default {
  name: "Collection",

  data() {
    return {
      LikeData: [],
    };
  },

  created() {
    //获取收藏商品数据
    this.getAllLikeData();
  },

  methods: {
    onClickLeft() {
      this.$router.push({ name: "My" });
    },

    //跳转到菜单页面
    goOrder() {
      this.$router.push({ name: "Order" });
    },

    //获取收藏商品数据
    getAllLikeData() {
      this.axios({
        method: "get",
        url: "/findAllLike",
      })
        .then((res) => {
          // 

          // 未登录跳转到登录页面
          if (res.data.code === 700) {
            this.$router.push({ name: "Login" });
          }

          // 查询成功
          if (res.data.code === 2000) {
            this.LikeData = res.data.result;
          }

          // 
        })
        .catch((err) => {
          
        });
    },

    //取消收藏
    notlike(item) {
      this.axios({
        method: "post",
        url: "/notlike",
        data: {
          pid: item.pid,
        },
      })
        .then((res) => {
          // 
          this.$toast(res.data.msg);

          //如果用户没有登录, 则跳转到登录页面
          if (res.data.code === 700) {
            return this.$router.push({ name: "Login" });
          }

          this.$router.go(0);
        })
        .catch((err) => {
          
        });
    },
  },
};
</script>

<style lang="less" scoped>
// 导航栏
/deep/.van-nav-bar {
  position: fixed;
  width: 100%;
  top: 0;
  height: 40px;
}

/deep/.van-nav-bar__title {
  color: #37343b;
  font-weight: 600;
}

/deep/.van-nav-bar__text {
  color: #37343b;
  font-weight: 600;
}

/deep/.van-nav-bar .van-icon {
  color: #37343b;
}

// 照片墙
.photo {
  width: 100%;
  height: 252px;
}

.photo img {
  width: 100%;
  height: 252px;
}

//收藏的商品
.main {
  width: 320px;
  border-radius: 10px;
  margin: auto;
  position: relative;
  bottom: 20px;
  background-color: #fff;
  padding: 14px 16px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.collectionbox {
  width: 120px;
  display: flex;
  flex-wrap: wrap;
}

.img {
  width: 80px;
  height: 80px;
}

.img img {
  width: 80px;
  height: 80px;
}

.name {
  width: 100%;
  height: 20px;
  padding: 4px 0 0 0;
}

.enname {
  width: 100%;
  height: 20px;
}

.price {
  width: 100%;
  font-weight: 600;
}

.van-icon {
  left: 26px;
}

//收藏为空界面
/deep/.van-empty {
  position: relative;
  left: 46px;
}

/deep/.van-empty__bottom {
  position: relative;
}

/deep/.van-button--danger {
  background-color: #37343b;
  border-color: #37343b;
}

/deep/.van-button {
  width: 200px;
}
</style>